Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP24。

在 EP 23 已經能透過 UI 增加系統角色扮演 Prompt 的相關處理並橋接到 ChatPage，但原本的刪除與編輯的部分並還沒有做處理，就讓本回來完成吧~~~

先在 ViewModels/SettingPageViewModel.cs 的 SettingPageViewModel 類別設計一個 ObservableProperty 修飾的欄位 "_isEdit"：

[ObservableProperty]
private bool _isEdit;

新增完成如下圖紅框：

繼續在 SettingPageViewModel 類別底下建立一個 SaveDataToFile 方法：

private async Task SaveDataToFile()
{
    var directoryPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), directoryName);
    if (!Directory.Exists(directoryPath))
    {
        Directory.CreateDirectory(directoryPath);
    }

    var jsonSettings = JsonSerializer.Serialize(ChatSystemRoles, options: new()
    {
        Encoder = JavaScriptEncoder.Create(UnicodeRanges.All)
    });
    await File.WriteAllTextAsync(chatSystemRolesFilePath, jsonSettings);
}

新增完成如下圖紅框：

接著調整一下原本的 Add 與 Delete 方法：

if (string.IsNullOrEmpty(CurrentChatSystemRole!.Name) || string.IsNullOrEmpty(CurrentChatSystemRole!.Prompt))
{
    return;
}

ChatSystemRoles!.Add(CurrentChatSystemRole!);

await SaveDataToFile();

CurrentChatSystemRole = new();

ChatSystemRoles!.Remove(CurrentChatSystemRole!);

await SaveDataToFile();

CurrentChatSystemRole = new();

修改完成如下圖紅框：

再設計兩個 RelayCommand 修飾的方法 Edit 與 Selected：

[RelayCommand]
private async Task Edit()
{
    System.Diagnostics.Debug.WriteLine($"Edit...{chatSystemRolesFilePath}");

    await SaveDataToFile();

    CurrentChatSystemRole = new();

    IsEdit = false;
}

[RelayCommand]
private void Selected()
{
    IsEdit = CurrentChatSystemRole is not null;        
}

新增完成如下圖紅框：

完成 ViewModel 的設計後，緊接著來調整對應的 SettingPageView 的部分。

找到 Views/SettingPageView.axaml 當中的 ComboBox 標記，並在其標記當中加入：

<Interaction.Behaviors>
    <ValueChangedTriggerBehavior Binding="{Binding CurrentChatSystemRole}">
        <InvokeCommandAction Command="{Binding SelectedCommand}" />
    </ValueChangedTriggerBehavior>
</Interaction.Behaviors>

新增完成如下圖紅框：

另外再找到原本的新增 Button 的標記，先增加：

IsVisible="{Binding !IsEdit}"

的屬性繫結，再加入的修改 Button 設計：

<Button Command="{Binding EditCommand}" IsVisible="{Binding IsEdit}">
    <StackPanel>
        <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Edit" />
        <TextBlock Text="修改" />
    </StackPanel>
</Button>

調整完成如下圖紅框：

執行偵錯(F5)看看。

若在 SettingPage 的 ComboBox 中未選擇任何項目，那按鈕會顯示新增：

若在 SettingPage 的 ComboBox 中選擇其中一項，那按鈕會顯示編輯：

而功能面大致上也都符合預期，看倌可以自己玩玩看唷~~~

完成！！！